<template>
    <div>
        <Topbar>我的</Topbar>

        <div style="background-color:white;height:100vh">
            <div class="avatar">
                <div>
                    <img :src="avatar?avatar:'static/pic/1.png'" class="pic" @click="avatarClick">
                    <span>{{username}}</span>
                    <button class="btn" @click="logout">退出登录</button>
                </div>
            </div>
            <div class="main">
                <router-link :to="'/Myshoucang/'+id">
                    <div>
                        <span class="l">我的收藏</span>
                        <span class=" r">></span>
                    </div>
                </router-link>
                <div>
                    <span class="l">我的发布</span>
                    <span class=" r">></span>
                </div>
                <div>
                    <span class="l">浏览记录</span>
                    <span class=" r">></span>
                </div>
                <router-link to="/myvisitiveteam">
                    <div>
                        <span class="l">我的看房团</span>
                        <span class=" r">></span>
                    </div>
                </router-link>
                <div>
                    <span class="l">我的优惠</span>
                    <span class=" r">></span>
                </div>
                <div>
                    <span class="l">修改密码</span>
                    <span class=" r">></span>
                </div>
                <div>
                    <span class="l">意见反馈</span>
                    <span class=" r">></span>
                </div>
                <div>
                    <span class="l">关于我们</span>
                    <span class=" r">></span>
                </div>
            </div>
        </div>
        

        <div class="useravatar" v-show="show">
            <label for="upavatar" class="up" ref="useravatar">+</label>
            <input type="file" accept="image/*" style="display:none" id="upavatar" @change="chooseImage($event)">
            <br>
            <button class="btn1" @click="upload">上传</button>
        </div>
    </div>
</template>

<script>
import Topbar from '../components/Topbar.vue'
import Leftside from '../components/Leftside.vue'
    export default{
        data:function(){
            return {
                imgg:"",
                aa:"",
                show:false,
                avatar:"",
                bb:"",
                username:"",
                id:""
            }
        },
        components:{
            Leftside,
            Topbar
        },
        methods:{
            avatarClick:function(){
               this.show = true
            },
            chooseImage:function(e){
                var useravatar = this.$refs.useravatar;
                this.imgg = e.target.files[0];
                var url = URL.createObjectURL(e.target.files[0]);
                useravatar.style.backgroundImage = "url("+url+")";
                useravatar.textContent="";
            },
            // 上传头像
            upload:function(){
                var data = new FormData();
                data.append("avatar",this.imgg);
                this.http.post("/user/userupload",data)
                .then(res=>{
                    // console.dir(res);
                    this.aa = res.data.msg;
                    this.$vux.alert.show({
                        title:this.aa,
                        onHide(){
                            location.href="/#/usermsg"
                            this.show =false;
                            location.reload();
                        }
                    })
                })
            },
            // 退出登录
            logout:function(){
                this.http.post("/user/logout")
                .then(res=>{
                    // console.dir(res);
                    this.bb = res.data.msg;
                    this.$vux.alert.show({
                        title:this.bb,
                        onHide(){
                            location.href="/#/"
                        }
                    })
                })
            }
        },
        mounted:function(){
            this.http.post("/user/useravatar")
            .then(res=>{
                // console.dir(res);
                this.avatar = res.data.data.avatar;
                this.username = res.data.data.username;
                this.id = res.data.data._id;
            })
        }
    }
</script>

<style scoped>
.main {
    height:100vh;
    background-color:white;
}
.main div{
    color: black;
}
.main div:hover{
    color: #FF6900;
}
a{
    text-decoration: none;
}
.useravatar{
border: 1px solid #999999;
position: absolute;
width: 100%;
top:125px;
background-color: white;
text-align: center;
}
.up{
    border: 1px solid black;
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 80px;
    text-align: center;
    background-size: 100% 100%;
}
.btn{
    border: none;
    background-color:#FF7500;
    color: white; 
    padding: 4px 8px;
    border-radius: 4px;
}
.btn1{
    width: 50%;
    border: none;
    background-color:#FF7500;
    color: white; 
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 10px;
}
.avatar{
    height: 80px;
    /*border: 1px solid black;*/
    padding: 7px 30px;
    background-color: #eeeeee;
}
.avatar span {
    margin-left: 10px;
}
.avatar button {
    margin-left: 30px;
}
.pic{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    vertical-align: middle;
}
.main{
    margin-top: 10px;
}
.main div{
    height: 41px;
    line-height: 41px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #999999;
}
.l{
    margin-left: 10px;
    font-size: 14px;
}
.r{
    margin-right: 10px;
    font-size: 20px;
    color: #999999;
}
</style>